// -------------------------------------------
// Sqaure class
// .sq-BREAKPOINT-(sm, md, lg, xl)
// -------------------------------------------

@each $breakpoint in map-keys($grid-breakpoints) {
  $abbrev: 'sq';
  
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @each $size, $length in $square-sizes {
      .#{$abbrev}#{$infix}-#{$size} {
        height: #{$length}px !important;
        width: #{$length}px !important;
        min-height: #{$length}px !important;
        min-width: #{$length}px !important;
      }
    }
    .#{$abbrev}#{$infix}-auto {
      height: auto !important;
      width: auto !important;
      min-height: auto !important;
      min-width: auto !important;
    }
  }
}